<template>
  <div class="v-loader-mask" v-if="show" :style="{ backgroundColor: cover ? '#fff' : 'transparent' }">
    <div class="v-spinner-warpper">
      <div class="v-spinner">
        <i></i>
        <img src="~assets/common/loader.png" class="v-loader-img" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'loading',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    cover: {
      type: Boolean,
      default: false,
    },
  },
}
</script>
<style lang="scss">
$width: 48px;
.v-loader-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background-color: transparent;
}

.v-spinner-warpper {
  width: 72px;
  height: 72px;
  padding: 12px;
  background-color: rgba(255, 255, 255, .75);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -36px;
  margin-top: -36px;
  z-index: 2001;
}

.v-spinner {
  font-size: 20px;
  width: $width;
  height: $width;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #dcdcdc;
  position: relative;
  i {
    position: absolute;
    clip: rect(0, $width, $width, $width / 2);
    width: $width;
    height: $width;
    animation: spinner-circle-clipper 1s ease-in-out infinite;
    &::after {
      position: absolute;
      clip: rect(0, $width, $width, $width / 2);
      width: $width;
      height: $width;
      content: '';
      animation: spinner-circle 1s ease-in-out infinite;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1px #ff464e;
    }
  }
  & > .v-loader-img {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -12px;
  }
}

@keyframes spinner-circle-clipper {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes spinner-circle {
  0% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
</style>
